<template>
  <!-- 论文 -->
  <div>
    <!-- 头部区域 -->
    <div class="head">
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 我的毕业设计课题 </template>
          <router-link to="/mytopic">{{ topic }}</router-link>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 指导老师 </template>
          <router-link
            :to="{ path: '/teacherinfo', query: { id: teacher_id } }"
            >{{ teacher }}</router-link
          >
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 内容区域 的上传 -->
    <div class="content">
      <!-- 上传区域 -->
      <el-form
        :inline="true"
        :rules="rules"
        ref="formInline"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="文件类型" prop="region">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="初稿" value="初稿"></el-option>
            <el-option label="终稿" value="终稿"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            ref="upload"
            :headers="header"
            action="http://127.0.0.1:8080/my/add_paper"
            :data="{ article_type: this.formInline.region }"
            :auto-upload="false"
            :on-success="onsuccess"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容文本区域 -->
    <div class="content_table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="文件名" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.article_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="日期" width="230">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.article_date | formatData
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.article_type }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">
              删除
            </el-button>
            <el-button size="mini" @click="download(scope.row)">
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.getinfo();
    this.getpaper();
  },

  data() {
    return {
      rules: {
        region: { required: true, message: "必选", trigger: "blur" },
      },
      header: {
        authorization: window.sessionStorage.token,
      },
      teacher_id: "",
      topic: "",
      teacher: "",
      tableData: [],
      formInline: {},
    };
  },
  filters: {
    formatData(time, arg) {
      return new Date(time).toLocaleString();
    },
  },
  methods: {
    getinfo() {
      this.$http.get("http://127.0.0.1:8080/my/getTopic").then((res) => {
        // console.log(res);
        if (res.data.status == 0) {
          this.topic = res.data.data[1][0].topic_name;
          this.teacher = res.data.data[0][0].teacher_name;
          this.teacher_id = res.data.data[0][0].id;
        } else {
          this.topic = "";
          this.teacher = "";
        }
      });
    },

    // 获取个人论文情况
    getpaper() {
      this.$http
        .get("http://127.0.0.1:8080/my/get_paper")
        .then((res) => {
          console.log(res);
          if (res.data.status == 0) {
            this.tableData = res.data.data;
            // console.log(this.tableData);
          } else {
            this.tableData = [];
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 删除实践
    handleEdit(row) {
      // console.log(index, row);
      this.$http
        .post("http://127.0.0.1:8080/my/dele_paper", this.$qs.stringify(row))
        .then((res) => {
          if (res.data.status == 0) {
            this.$message.success(res.data.message);
            // this.tableData = res.data.data;
            this.getpaper();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 下载实践
    download(row) {
      location.href = "http://127.0.0.1:8080/api/download_paper?id=" + row.id;
    },
    // 上传
    submitUpload() {
      this.$refs.formInline.validate((valid) => {
        if (!valid) return;
        const boolean = this.tableData.some((val) => {
          return val.article_type == "终稿";
        });
        if (!boolean || this.formInline.region == "初稿") {
          this.$refs.upload.submit(this.formInline);
        } else {
          this.$message.error("你已经上传过终稿了");
        }
      });
    },
    onsuccess() {
      console.log(1111);
      this.getpaper();
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  margin: 20px 0;
  display: flex;
  justify-content: flex-start;
}
</style>
